<script setup lang="ts">
import {ref, onMounted, computed, reactive, Ref, UnwrapRef} from "vue";
import useStore from "../../modules/store/User"
import {ElMessage, ElMessageBox, FormInstance} from "element-plus";
const store = useStore()
// console.log(store.dynamic)
// 数据渲染的列表
// const searchList = computed(() => store.dynamic());
// console.log(searchList.value.length)
// 控制对话框的显示与隐藏的开关
const dialogVisible = ref(false)
const formRef = ref<FormInstance>()
// @ts-ignore
let key: number = ref(0)
// 定义了一个类型判定
const formInline = reactive({
  amount: '',
  name: '',
  number: '',
  picture: '',
  region: '',
  state: '',
  quantity: '',
  time: ''
})
// 修改内容的事件触发
// fetchData(currentPage.value);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
// const onSubmit = () => {
//   // console.log(formInline.value)
//   dialogVisible.value = false
//   store.editA(formInline,key)
// }
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(formEl)
  formEl.validate((valid:boolean) => {
    if (valid) {
      dialogVisible.value = false
      // store.editA(formInline,key)
      store.editA(formInline,key)
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const handleEdit = (index: number, row: any) => {
  if(row.state === '锁定'){
    ElMessage({
      message: '该选项已被锁定，请解锁再来编辑',
      type: 'error',
    })
    return
    console.log(index)
  }else {
    dialogVisible.value = true
    key = row.key
    formInline.amount=row.amount
        formInline.name=row.name
        formInline.number=row.number
        formInline.picture=row.picture
        formInline.region=row.region
        formInline.state=row.state
        formInline.quantity=row.quantity
        formInline.time=row.time
  }
}
// 渲染完成时发送一个请求
onMounted(()=>{
  store.request()
});
const change = (selection:object)=>{
  console.log(selection)
  const keyArr:Array<any> = [];
  selection.forEach((item:any)=>{
    keyArr.push(item.key)
  })
  store.keyArrA(keyArr)
}
</script>

<template>
  <el-table :data="store.searchListA"
            @selection-change="change"
            max-height="230"
            style="width: 100%;margin: 30px 0">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="编号" width="80">
      <template #default="scope">
        {{scope.row.key}}
      </template>
    </el-table-column>
    <el-table-column label="头像" width="100">
      <template #default="scope">
<!--        {{scope.row.commodity}}-->
        <img :src="scope.row.picture" alt="">
      </template>
    </el-table-column>
    <el-table-column label="昵称" width="180">
      <template #default="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
    <el-table-column label="手机号" width="180">
      <template #default="scope">
        {{scope.row.number}}
      </template>
    </el-table-column>
    <el-table-column label="区域" width="180">
      <template #default="scope">
        {{scope.row.region}}
      </template>
    </el-table-column>
    <el-table-column label="状态" width="180">
      <template #default="scope">
        {{scope.row.state}}
      </template>
    </el-table-column>
    <el-table-column label="消费金额" width="180">
      <template #default="scope">
        {{scope.row.amount}}
      </template>
    </el-table-column>
    <el-table-column label="订单数量" width="180">
      <template #default="scope">
        {{scope.row.quantity}}
      </template>
    </el-table-column>
    <el-table-column label="注册时间" width="180">
      <template #default="scope">
        {{scope.row.time}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" class="buttonText" type="warning" link @click="handleEdit(scope.$index, scope.row)"
        >修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :inline="true" ref="formRef" :model="formInline" class="demo-form-inline">
      <el-form-item label="昵称"
                    :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' }
      ]"
                    prop="name">
        <el-input v-model="formInline.name" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="手机号"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
        {
          pattern: /^[1][3-9][0-9]{9}$/,
          message: '需要正确的手机号',
          trigger: 'blur'
        },
      ]"
          prop="number">
        <el-input v-model="formInline.number" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="区域"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="region">
        <el-input v-model="formInline.region" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="状态"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="state">
        <!--        <el-input v-model="formInline.state" placeholder="Approved by" clearable />-->
        <el-select v-model="formInline.state" clearable placeholder="Select">
          <el-option
              label="正常"
              value="正常"
          />
          <el-option
              label="锁定"
              value="锁定"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          label="消费金额"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="amount">
        <el-input v-model.number="formInline.amount" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="订单数量"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'number', message: '需要类型匹配' },
      ]"
          prop="quantity">
        <el-input v-model.number="formInline.quantity" placeholder="Approved by" clearable />
      </el-form-item>
      <el-form-item
          label="注册时间"
          :rules="[
        { required: true, message: '请填入相关信息' },
        { type: 'string', message: '需要类型匹配' },
      ]"
          prop="time">
        <el-date-picker
            v-model.trim="formInline.time"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="Pick a date"
            :default-value="new Date(2023, 7, 14)"
        />
        <!--        <el-input v-model="formInline.time" placeholder="Approved by" clearable />-->
      </el-form-item>
      <el-form-item style="display: flex;justify-content: center">
        <el-button type="primary"   @click="onSubmit(formRef)">修改</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
